React = require('react')
{View,Text,Image,StyleSheet,ScrollView,TouchableHighlight,TouchableOpacity} = require('react-native')

Toast = require('antd-mobile/lib/toast')
Badge = require('antd-mobile/lib/badge')

_ = require('underscore')


Flex = require('antd-mobile/lib/flex')
Dimensions = require('Dimensions')
{ width, height } = Dimensions.get('window')

Item = React.createClass
  clickHandle:->
    {navigator,target,title} = this.props
    return unless navigator
    obj = Object.assign {},target,
      params:
        title:title
    if target?.component
      navigator.push obj
    # if navigator and target.component
    #   debugger
    #   currRouter = _.findWhere navigator.getCurrentRoutes(),{name:obj.name}
    #   if currRouter
    #     navigator.jumpTo currRouter
    #   else
    #     navigator.push obj

  render:->
    {img,title} = @props
    if @props.isHeader
      txtStyle = color:'blue'
      border:'none'
    else
      txtStyle = color:'#ffffff'
      borderStyle =
        borderBottomWidth:1
        borderRightWidth:1
        borderColor:'#AAAAAA'

    <TouchableOpacity style={{height:width/3,flex:1}}   onPress={@clickHandle}>
      <View style={[borderStyle,{height:width/3,flexDirection:'column',alignItems:'center',justifyContent:'center',flex:1}]}>
        <View style={{flex:0}}>
          {
            if @props.Badge
              <Badge text={@props.Badge} overflowCount={10}>
                <Image source={img}  style={{width:width / 6,height:width / 6,resizeMode:'contain'}}/>
              </Badge>
            else
              <Image source={img}  style={{width:width / 6,height:width / 6,resizeMode:'contain'}}/>

          }
        </View>
        <View style={{flex:0,alignItems:'flex-start',justifyContent:'flex-start'}}>
          <Text style={txtStyle}>{title}</Text>
        </View>
      </View>

    </TouchableOpacity>





    # <View style={[borderStyle,{height:width/3,flexDirection:'column',alignItems:'center',justifyContent:'center',flex:1}]}>
    #
    #   <View style={{flex:0}}>
    #     <Image source={img}  style={{width:width / 6,height:width / 6,resizeMode:'contain'}}/>
    #   </View>
    #   <View style={{flex:0,alignItems:'flex-start',justifyContent:'flex-start'}}>
    #     <Text style={txtStyle}>{title}</Text>
    #   </View>
    # </View>




    # <View style={{flex:1}}>
    #     <Flex direction="column">
    #       <Flex.Item style={{flex:0.8}}>
    #         <TouchableOpacity   onPress={@clickHandle}>
    #           <Image source={img}  style={{width:width / 5,resizeMode:'contain'}}/>
    #         </TouchableOpacity>
    #       </Flex.Item>
    #       <Flex.Item style={{flex:0.2}}>
    #         <Text style={{color:'#ffffff'}}>{title}</Text>
    #       </Flex.Item>
    #     </Flex>
    # </View>




module.exports = Item
